<template>
  <div>
    <h3>下拉菜单 - CityId {{ cityId }}</h3>

    <!-- 1. 如果是元素dom事件，$event表示的是事件对象
         2. 如果是我们自定义的事件，在组件中使用的时候，$event表示的是事件的形参
         
         在vue中，看到$event, 先区分是否是原生的dom还是我们自己定义的事件
    -->
    <city-select :value="cityId" @input="cityId = $event"></city-select>
    <!-- <city-select :value="cityId" @input="handleSelect"></city-select> -->
    <!-- <city-select v-model="cityId"></city-select> -->

    <!-- 
      v-model 本质就是 :value属性绑定  和 @input事件监听的语法糖 （默认情况）
      当父组件有一个数据需要传递给子组件，并且子组件又需要触发事件修改这个数据的时候
      可以使用v-model 简写 

      ==> 但是需要注意： 
          1. 子组件props接收的属性名必须叫value
          2. 子组件的自定义事件名要写成input
     -->

  </div>
</template>

<script>
import CitySelect from './components/city-select.vue'
export default {
  components:{
    CitySelect
  },
  data(){
    return {
      cityId: 2
    }
  },
  methods:{
    handleSelect(val){
      console.log(val)
      this.cityId = val
    }
    
  }
  }
</script>

<style>

</style>